<template>
  <div class="income-detail-box container pad-b-30">
    <div class="top-remark">
      <span>微信号：598486126abb</span>
      <van-icon name="cross" />
    </div>
    <div class="select-date pad-l-15 pad-r-15">
      <div @click="showSelectDate = true" class="date-box">
        <span>2020年10月 <span class="down-icon"></span></span>
      </div>
      <div class="income-detail-info pad-r-15" v-if="isDetail" @click="isDetail=!isDetail">
        <img v-if="fileSpace" :src="fileSpace+ '/images/income-detail.png' " alt="">
        <span>详情</span>
      </div>
      <div class="income-analyze-info pad-r-15" v-else @click="isDetail=!isDetail;getCharts();getRingCharts()">
        <img v-if="fileSpace" :src="fileSpace+ '/images/income-analyze.png' " alt="">
        <span>分析</span>
      </div>
    </div>
    <div class="income-top-box">
      <div class="top-bg">
        <img v-if="fileSpace" :src="fileSpace + '/images/charts-bg.png'" alt="">
        <div class="video-income"><span>直播收入</span><span>共6场</span></div>
        <div class="income-count"><span>￥</span><span>886.66</span></div>
      </div>
    </div>
    <!-- 详情 -->
    <div v-if="isDetail">
      <div class="income-content-box pad-b-30">
        <h5>收入对比</h5>
        <canvas canvas-id="lineCanvas" id="canvas" @touchstart="touchHandler" @touchmove="moveHandler" @touchend="touchEndHandler" ></canvas>
        <div class="line"></div>
        <h5 style="padding-bottom:0">直播商品</h5>
        <canvas canvas-id="ringCanvas" id="ring-canvas"></canvas>
        <div class="distribution-income">
          <span>分销商品收入</span>
          <span>+855.60</span>
        </div>
        <!-- 分销排名 -->
        <div class="order-tabs">
          <p class="rank-title">分销商品排名</p>
          <div class="order-list pad-15">
            <div class="order-list-item mar-b-6">
              <div class="item-img">
                <img src="https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750" alt="">
              </div>
              <div class="item-text">
                <span class="line-1">宝宝汉服春秋婴儿棉麻长袖宝宝汉服春秋婴儿棉麻长袖</span>
                <span>+166.00</span>
              </div>
            </div>
            <div class="order-list-item">
              <div class="item-img">
                <img src="https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750" alt="">
              </div>
              <div class="item-text">
                <span class="line-1">宝宝汉服春秋婴儿棉麻长袖宝宝汉服春秋婴儿棉麻长袖</span>
                <span>+166.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分析 -->
    <div v-else>
      <div class="income-content-box pad-b-30">
        <h5>直播间</h5>
        <swiper class="swiper-box" :current="currentSwiperIndex" @change="changeItem">
          <block v-for="(item, index) in videoList" :key="index">
            <swiper-item class="swiper-item-box">
              <div class="video-item">
                <div class="video-img">
                  <img :src="item.imgUrl" alt="">
                  <span>直播中</span>
                </div>
                <div class="video-text-info">
                  <span class="line-1">李佳琦华西子彩妆李佳琦华西子彩妆分</span>
                  <span class="user-name">主播: 毛毛</span>
                  <span class="enter-btn">进入</span>
                </div>
                <div class="transparent-layer" v-if="currentSwiperIndex !== index" @click="enterVideo(index)"></div>
              </div>
            </swiper-item>
          </block>
        </swiper>
        <div class="line-style2"></div>
        <!-- 分销 自营 -->
        <div class="order-tabs">
          <van-tabs>
            <van-tab title="分销订单">
              <div class="order-list pad-15">
                <div class="order-list-item mar-b-6">
                  <div class="item-img">
                    <img src="https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750" alt="">
                  </div>
                  <div class="item-text">
                    <span class="line-1">宝宝汉服春秋婴儿棉麻长袖宝宝汉服春秋婴儿棉麻长袖</span>
                    <span>+166.00</span>
                  </div>
                </div>
                <div class="order-list-item">
                  <div class="item-img">
                    <img src="https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750" alt="">
                  </div>
                  <div class="item-text">
                    <span class="line-1">宝宝汉服春秋婴儿棉麻长袖宝宝汉服春秋婴儿棉麻长袖</span>
                    <span>+166.00</span>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="自营订单"></van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <cover-view>
      <van-action-sheet :show="showSelectDate" @close="showSelectDate = false">
        <van-datetime-picker
          type="year-month"
          :value="currentDate"
          :min-date="minDate"
          @input="onInput"
        />
      </van-action-sheet>
    </cover-view>

  </div>
</template>

<script>
import {Charts} from '../../../utils/wxcharts'
export default {
  data() {
    return {
      option1: [
        { text: '2020年9月', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      value1: 0,
      Charts: null,
      ringCharts: null,
      isDetail: true, // 显示详情/分析
      currentSwiperIndex: 0,
      videoList: [
        {
          imgUrl: 'https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750'
        },
        {
          imgUrl: 'https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750'
        },
        {
          imgUrl: 'https://img-1.joinsun.vip/upload/b75534b770327bf03dce2a93d06a7fac.jpg?imageMogr2/gravity/North/crop/750x750'
        }
      ],
      showSelectDate: false,
      currentDate: new Date().getTime(),
      minDate: new Date().getTime()
    }
  },
  onLoad() {
    this.getCharts()
    this.getRingCharts()
    // this.Charts = new Charts({
    //   canvasId: 'columnCanvas',
    //   type: 'column',
    //   categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017', '2018', '2019'],
    //   background: '#ffffff',
    //   title: {
    //     name: '收入'
    //   },
    //   series: [{
    //     name: '成交量1',
    //     data: [15, 20, 45, 37, 4, 80, 100, 110]
    //   }],
    //   xAxis: {
    //     disableGrid: true, // 是否显示X轴的网格分割线
    //     fontColor: '#999999' // X轴文字颜色
    //   },
    //   yAxis: {
    //     disabled: true, // 是否显示Y轴
    //     format: function(val) { // 自定义Y轴文本
    //       return val + '万'
    //     }
    //   },
    //   extra: {
    //     lineStyle: 'curve',
    //     legendTextColor: '#f00' // 文案颜色
    //   },
    //   dataItem: {
    //     color: '#FFF6AC'
    //   },
    //   width: 375,
    //   height: 300,
    //   dataLabel: true,
    //   dataPointShape: true,
    //   enableScroll: true // 拖拽图表
    // })
  },
  methods: {
    onInput(event) {
      this.currentDate = event.detail
    },
    getCharts() {
      this.Charts = new Charts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: ['1月', '2月', '3月', '4月', '5月', '6月'],
        series: [{
          name: '成交量1',
          data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.4],
          format: function(val) {
            return val.toFixed(2) + '万'
          }
        }],
        xAxis: {
          disableGrid: true, // 是否显示X轴的网格分割线
          fontColor: '#999999' // X轴文字颜色
        },
        yAxis: {
          gridColor: '#FFF9CC',
          // title: '成交金额 (万元)',
          format: function(val) {
            return val.toFixed(2)
          },
          min: 0
        },
        width: 345,
        height: 300,
        dataLabel: true,
        dataPointShape: true,
        enableScroll: true // 拖拽图表
      })
      let _that = this
      setTimeout(function() {
        _that.Charts.showToolTip(5, {
          format: function(item, category) {
            return category + ' ' + item.name + ':' + item.data
          }
        })
      }, 1500)
    },
    getRingCharts() {
      this.ringCharts = new Charts({
        animation: true,
        canvasId: 'ringCanvas',
        type: 'ring',
        extra: {
          ringWidth: 20,
          pie: {
            offsetAngle: -180
          }
        },
        title: {
          name: '70%',
          color: '#7cb5ec',
          fontSize: 25
        },
        subtitle: {
          name: '收益率',
          color: '#666666',
          fontSize: 15
        },
        series: [{
          name: '自营商品',
          data: 15,
          stroke: false
        }, {
          name: '分销商品',
          data: 35,
          stroke: false
        }],
        disablePieStroke: true,
        width: 300,
        height: 300
        // dataLabel: false,
        // legend: false,
        // padding: 0
      })
    },
    changeItem(e) {
      this.currentSwiperIndex = e.mp.detail.current
    },
    enterVideo(index) {
      this.currentSwiperIndex = index
    },
    touchHandler(e) {
      this.Charts.scrollStart(e)
      console.log(this.Charts.getCurrentDataIndex(e))
      this.Charts.showToolTip(e, {
        format: function(item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      })
    },
    moveHandler(e) {
      this.Charts.scroll(e)
    },
    touchEndHandler(e) {
      this.Charts.scrollEnd(e)
    }
  },
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.income-detail-box {
  .top-remark {
    font-size: 20rpx;
    background: #f5f5f5;
    color: #666666;
    padding: 15rpx 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .select-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
    height: 93rpx;
    box-sizing: border-box;
    .date-box {
      font-size: 26rpx;
      color: #333333;
      display: flex;
      align-items: center;
      height: 100%;
      .down-icon {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 8rpx solid #b5b5b5;
        border-right: 8rpx solid transparent;
        border-bottom: 8rpx solid transparent;
        border-left: 8rpx solid transparent;
      }
    }
    .income-detail-info {
      font-size: 26rpx;
      color: #333333;
      display: flex;
      height: 100%;
      align-items: center;
      img {
        width: 38rpx;
        height: 40rpx;
        margin-right: 6rpx;
      }
    }
    .income-analyze-info {
      font-size: 26rpx;
      color: #333333;
      display: flex;
      align-items: center;
      height: 100%;
      img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 6rpx;
      }
    }
  }
  .income-top-box {
    padding: 25rpx 30rpx;
    display: flex;
    justify-content: center;
    .top-bg {
      position: relative;
      img {
        width: 710rpx;
        height: 212rpx;
      }
      .video-income {
        position: absolute;
        top: 32rpx;
        padding-left: 35rpx;
        padding-right: 35rpx;
        color: #fff;
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        & > span:nth-child(1) {
          font-size: 26rpx;
        }
        & > span:nth-child(2) {
          font-size: 24rpx;
        }
      }
      .income-count {
        color: #fff;
        bottom: 48rpx;
        position: absolute;
        left: 35rpx;
        & > span:nth-child(1) {
          font-size: 26rpx;
        }
        & > span:nth-child(2) {
          font-size: 36rpx;
        }
      }
    }
  }
  .income-content-box {
    width: 91.5%;
    background: #fff;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: -28rpx;
    position: relative;
    h5 {
      padding: 60rpx 30rpx;
      font-weight: 700;
    }
    .line {
      width: 100%;
      position: relative;
    }
    .line::before {
      content: '';
      width: 16rpx;
      height: 16rpx;
      background: #eeeeee;
      border-radius: 50%;
      display: block;
      position: absolute;
      left: -8rpx;
      top: -8rpx;
    }
    .line::after {
      content: '';
      width: 16rpx;
      height: 16rpx;
      background: #eeeeee;
      border-radius: 50%;
      display: block;
      position: absolute;
      right: -8rpx;
      top: -8rpx;
    }
    .distribution-income {
      display: flex;
      justify-content: space-between;
      padding: 28rpx 0;
      width: 91%;
      margin: 0 auto;
      margin-top: 30rpx;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      color: #333333;
      font-size: 26rpx;
      font-weight: 700;
    }
    .swiper-box {
      height: 456rpx;
      padding-left: 35rpx;
      .swiper-item-box {
        width: 320rpx !important;
        .video-item {
          position: relative;
          .video-img {
            position: relative;
            display: flex;
            justify-content: center;
            img {
              width: 310rpx;
              height: 280rpx;
            }
            & > span {
              position: absolute;
              top: 13rpx;
              left: 12rpx;
              width: 108rpx;
              height: 32rpx;
              background: #ffe400;
              border-radius: 16px;
              text-align: center;
              line-height: 32rpx;
              color: #000000;
              font-size: 22rpx;
            }
          }
          .video-text-info {
            .line-1 {
              font-size: 28rpx;
              color: #333333;
            }
            .user-name {
              color: #999999;
              font-size: 24rpx;
            }
            .enter-btn {
              width: 208rpx;
              height: 64rpx;
              background: #5b3cd0;
              color: #fff;
              font-size: 24rpx;
              line-height: 64rpx;
              text-align: center;
              display: block;
              border-radius: 32px;
            }
          }
          .transparent-layer {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .line-style2 {
      width: 640rpx;
      margin: 0 auto;
      border-top: 1px solid #eeeeee;
      position: relative;
      margin-top: 42rpx;
      margin-bottom: 30rpx;
      &::before {
        content: '';
        width: 22rpx;
        height: 22rpx;
        display: block;
        border-top: 2rpx solid #eeeeee;
        border-right: 2rpx solid #eeeeee;
        border-left: #fff;
        border-bottom: 2rpx solid #fff;
        transform: rotate(-45deg);
        position: absolute;
        top: -14rpx;
        left: 20px;
        background: #fff;
      }
    }
    .order-tabs {
      .rank-title {
        color: #666666;
        font-size: 24rpx;
        padding: 30rpx;
      }
      /deep/ .van-tabs__wrap {
        width: 50%;
      }
      /deep/ .van-hairline--top-bottom::after {
        border: none;
      }
      /deep/ .van-tabs__line {
        background-color: #fff;
      }
      .order-list {
        padding-top: 0;
        .order-list-item {
          display: flex;
          .item-img {
            img {
              width: 96rpx;
              height: 96rpx;
              border-radius: 8px;
            }
          }
          .item-text {
            width: 100%;
            display: flex;
            justify-content: space-around;
            .line-1 {
              width: 305rpx;
              height: 46rpx;
              line-height: 46rpx;
              color: #666666;
              font-size: 24rpx;
            }
            & > span:nth-child(2) {
              color: #333333;
              font-size: 30rpx;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
  // /deep/ ._van-action-sheet {
  //   .overlay-index--van-overlay {
  //     z-index: 2147483646 !important;
  //   }
  //   .sheet-index--van-action-sheet {
  //     z-index: 2147483647 !important;
  //   }
  // }
}
#canvas {
  width: 100%;
  height: 300px;
}
#ring-canvas {
  width: 100%;
  height: 300px;
  // left: 50rpx;
}
</style>